<template>
  <div class="wp-transfer">
      <div class="wp-transfer__left">
          <el-table :data="leftList" ref="leftTableRef" @select="selectLeft" @select-all="selectAllLeft">
            <el-table-column type="selection"  :selectable="checkSelect" width="50"></el-table-column>
            <el-table-column label="产品名称" prop="productName" show-overflow-tooltip></el-table-column>
            <el-table-column label="产品类型" prop="productTypeName" show-overflow-tooltip></el-table-column>
            <el-table-column label="产品数量" prop="availableNum"></el-table-column>
            <el-table-column label="产品单位" prop="unit"></el-table-column>
          </el-table>
      </div>
      <div class="wp-transfer__buttons">
          <div>
              <el-button  @click.native="delOption" type="primary" icon="el-icon-arrow-left" :disabled="disabledDelete" circle></el-button>
          </div>
          <div>
              <el-button @click.native="addOption"  type="primary" icon="el-icon-arrow-right" :disabled="disabledAdd" circle></el-button>
          </div>
      </div>
        <div  class="wp-transfer__right">
          <el-table :data="rightList" ref="rightTableRef" @select="selectRight" @select-all="selectAllRight">
            <el-table-column type="selection" width="50"></el-table-column>
            <el-table-column label="产品名称" prop="productName" show-overflow-tooltip></el-table-column>
            <el-table-column label="产品类型" prop="productTypeName" show-overflow-tooltip></el-table-column>
            <el-table-column label="产品数量" prop="productNum" width="150">
                <template slot-scope="scope">
                    <el-input-number controls-position="right" :min="1" :max="scope.row.availableNum" v-model="scope.row.productNum" placeholder="" size="mini"></el-input-number>
                </template>
            </el-table-column>
            <el-table-column label="产品单位" prop="unit"></el-table-column>
          </el-table>
      </div>
  </div>
</template>

<script>

export default {
  model: {
    prop: 'value',
    event: 'select'
  },
  props: {
    list: Array,
    value: Array
  },
  watch: {
    list: {
      handler (val) {
        if (val) {
          this.leftList = [...val]
          this.initLeftList = [...val]
        }
      },
      deep: true,
      immediate: true
    },
    rightList: {
      handler (val) {
        if (val) {
          for (let index = 0; index < val.length; index++) {
            const item = val[index]
            if (!item.productNum || item.productNum <= 0) {
              this.$msgBox.error('产品数量不能为空')
              return
            }
          }
        }
        this.$emit('select', val)
      },
      deep: true
    },
    leftSelectList: {
      handler (val) {
        this.disabledAdd = !(val && val.length > 0)
      },
      deep: true
    },
    rightSelectList: {
      handler (val) {
        this.disabledDelete = !(val && val.length > 0)
      },
      deep: true
    }
  },
  components: {},
  data () {
    return {
      disabledDelete: true,
      disabledAdd: true,
      leftList: [],
      initLeftList: [],
      rightList: [],
      leftSelectList: [],
      rightSelectList: []
    }
  },
  methods: {
    delOption () {
      this.disabledDelete = true
      this.rightSelectList.forEach(item => {
        const orgItme = this.initLeftList.find(v => {
          return v.productCode === item.productCode
        })
        this.leftList.push(orgItme)
        const index = this.rightList.findIndex(v => {
          return v.productCode === item.productCode
        })
        console.log(index)
        if (index !== undefined && index >= 0) {
          this.rightList.splice(index, 1)
        }
      })
    },
    addOption () {
      this.disabledAdd = true
      this.leftSelectList.forEach(item => {
        this.rightList.push({...item})
        const index = this.leftList.findIndex(v => {
          return v.productCode === item.productCode
        })

        if (index !== undefined && index >= 0) {
          this.leftList.splice(index, 1)
        }
      })
    },
    selectLeft (selection, row) {
      this.leftSelectList = [...selection]
    },
    selectAllLeft (selection) {
      this.leftSelectList = [...selection]
    },
    selectRight (selection, row) {
      this.rightSelectList = [...selection]
    },
    selectAllRight (selection) {
      this.rightSelectList = [...selection]
    },
    checkSelect (row, index) {
      return row.availableNum && row.availableNum > 0
    }
  }
}
</script>

<style lang="scss" scoped>
.wp-transfer{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 10px;
    min-height: 200px;
    &__left{
        margin: 5px;
        border: 1px solid #f2f2f2;
        // background:red;
    }
    &__right{
        margin: 5px;
        border: 1px solid #f2f2f2;
        // background:red;

    }
    &__buttons{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
}
</style>
